<template>
	<div class="history">
		<div class="search">
			<div class="left">
				<el-input placeholder="车次" v-model="trainNum" class="ipt-1 search" size="small" />
				<el-input placeholder="始发站" v-model="startStation" class="ipt-1 search" size="small" />
				<el-input placeholder="终到站" v-model="endStation" class="ipt-1 search" size="small" />
				<!-- <el-date-picker type="daterange" range-separator="至" v-model="date" size="small" class="search" /> -->
			</div>
			<div class="btns">
				<el-button @click="search">查询</el-button>
				<el-button @click="reset">重置</el-button>
			</div>
		</div>
		<div class="table">
			<el-table
				:data="tableData"
				style="width: 100%; background-color: transparent"
				class="c-table"
				header-row-class-name="t-head"
				header-cell-class-name="t-head-cell"
				cell-class-name="t-body-cell"
				row-class-name="t-body-row"
			>
				<el-table-column label="序号" type="index" />
				<!-- <el-table-column prop="name" label="通知信息主题" />
				<el-table-column prop="content" label="发送内容">
					<template #default="{ row, $index }">
						<span @mouseenter="showContent = row.content" @mouseleave="showContent = ''">{{ row.content }}</span>
					</template>
				</el-table-column>

				<el-table-column prop="area" label="拥堵区域" />
				<el-table-column prop="user" label="发送人" />
				<el-table-column prop="groud" label="通知群组" />
				<el-table-column prop="time" label="发送日期" /> -->
				<el-table-column prop="trainNum" label="车次" />
				<el-table-column prop="type" label="类型" />
				<el-table-column prop="startStation" label="始发站" />
				<el-table-column prop="endStation" label="终到站" />
				<el-table-column prop="arrivalTime" label="到时" />
				<el-table-column prop="departureTime" label="开时" />
				<el-table-column prop="parkingTime" label="停时" />
				<el-table-column prop="actualArrivalTime" label="实到" />
				<el-table-column prop="actualDrivingTime" label="实开" />
				<el-table-column prop="actualParkingTime" label="实停" />
				<el-table-column prop="ticketGate" label="检票口" />
				<el-table-column prop="channel" label="股道" />
				<el-table-column prop="marshalling" label="编组" />
				<el-table-column prop="Model" label="车型" />
				<el-table-column prop="takeResponsibility" label="担当" />
				<el-table-column prop="peopleBoarding" label="下车人数" />
				<el-table-column prop="peopleGetting" label="上车人数" />
				<el-table-column prop="transfersNum" label="换乘人数" />
				<el-table-column prop="BeijingNum" label="进京人数" />
				<el-table-column prop="shanghaiNum" label="进沪人数" />
			</el-table>
			<el-pagination
				class="c-pagination"
				:teleported="false"
				popper-class="c-popper"
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="[10, 20, 50, 100]"
				:size="'small'"
				layout="total,  prev, pager, next"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
			<div class="showContent" v-if="showContent">
				{{ showContent }}
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { includes, slice } from 'lodash'
	import { ref, watch } from 'vue'
	import isBetween from 'dayjs/plugin/isBetween'
	import dayjs from 'dayjs'
	import { baseData } from './History.ts'
	dayjs.extend(isBetween)

	const currentPage = ref(1)
	const pageSize = ref(10)
	const tableData = ref(
		baseData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value),
	)
	const handleSizeChange = () => {}
	const handleCurrentChange = (page: number) => {
		tableData.value = baseData.value.slice((page - 1) * pageSize.value, page * pageSize.value)
	}
	const endStation = ref('')
	const trainNum = ref('')
	const startStation = ref('')
	const date = ref('')
	const showContent = ref('')
	const styleChange = () => {}
	const total = ref(baseData.value.length)
	const search = () => {
		tableData.value = baseData.value
			.filter((item) => {
				let flag = false
				if (trainNum.value) {
					flag = item.trainNum == trainNum.value
				}
				if (startStation.value) {
					flag = item.startStation == startStation.value
				}
				if (endStation.value) {
					flag = item.endStation.includes(endStation.value)
				}
				// if (date.value) {
				// 	flag = dayjs(item.time).isBetween(date.value[0], date.value[1], 'day')
				// }
				return flag
			})
			.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
		total.value = 1
	}
	const reset = () => {
		tableData.value = baseData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
		total.value = baseData.value.length
	}
	// const back = () => {
	// 	router.go(-1)
	// }
	watch(baseData, () => {
		reset()
	})
</script>

<style lang="scss" scoped>
	.history {
		position: absolute;
		width: 100vw;
		height: calc(100vh - $headerHeight - 110px);
		z-index: 2000;
		left: 0;
		bottom: 0;
		background-color: #000;
		padding: 100px 100px;
		box-sizing: border-box;
	}
	.table {
	}
	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left {
			margin-bottom: 20px;
			display: flex;
		}
	}

	.el-input {
		width: 400px;
		height: 80px;
		font-size: 35px;
		border: 2px solid rgba(0, 142, 255, 1);

		&::v-deep(.el-input__wrapper) {
			background-color: #000;
			height: 100%;
		}
		&:nth-child(n + 2) {
			margin-left: 30px;
		}
		&::v-deep(input) {
			height: 100%;
			background-color: #000;
		}
	}
	.el-button {
		background-color: rgba(64, 180, 255, 1);
		color: #fff;
		font-size: 35px;
		height: 60px;
	}
	::v-deep(.el-date-editor) {
		margin-left: 50px !important;
	}
	.showContent {
		position: absolute;
		width: 1200px;
		padding: 50px 50px;
		z-index: 99999;
		font-size: 40px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #000;
		line-height: 60px;
		text-align: justify;
	}
</style>
